<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
import { timeAbbreviation } from '@/utils/time'
import { Api, SearchApi } from '@/apis/index'
import { useCounterStore } from '@/stores/counter'

import type { MediaBangumi } from '@/TypingMore/SearchTyping'

import NofindView from '@/components/NofindView.vue'

const props = defineProps<{
    mediaBangumiData: Array<MediaBangumi> | null
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const isShow = ref(false)

const setIsShow = (time: number): string => {
    let date = new Date(new Date().getTime() - time)
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    let d = date.getDate()
    return y + '-' + m + '-' + d
}

const getBvid = async (recommendSeasonItem: MediaBangumi) => {
    console.log(recommendSeasonItem)
    await Api.getSectionData(recommendSeasonItem.season_id).then(async ({ data: epi }) => {

        console.log(epi.result.main_section.episodes[0])
        let ep = epi.result.main_section.episodes[0]
        // Api.getSectionIdData(ep.share_url.split('ep')[1]).then(({data}) => {

        // })
        await Api.getBvid(ep.aid, ep.cid, ep.share_url.split('ep')[1], recommendSeasonItem.season_id).then(({ data }) => {
            console.log('hhhh', data)
            let obj = {
                bvid: data.data.bvid,
                aid: epi.result.main_section.episodes[0].aid,
                length:  0,
                title: recommendSeasonItem.title,
                play:0,
                video_review: recommendSeasonItem.media_score.user_count,
                pic: recommendSeasonItem.cover
            }
            browseRecords(obj)
            router.replace(`/video/${data.data.bvid}`)
        })

    })

}

const OtherEpisodes = async (epId: number, title: string) => {
    let { data } = await SearchApi.getOtherEpisodesData(epId)
    console.log(data)
    for (let i = 0; i < data.result.episodes.length; i++) {
        let arr = data.result.episodes[i]
        console.log(title, arr.title)
        if (title === arr.title) {
            router.replace(`/video/${arr.bvid}`)
            break
        }

    }

}

</script>

<template>
    <div class=" bg-white" v-if="mediaBangumiData && mediaBangumiData.length > 0">
        <div v-for="m in mediaBangumiData" :key="m.season_id" class=" flex mb-6 p-2">
            <div class=" relative w-32 ">
                <img :src="m.cover + '@156w_208h_1c.webp'" alt="" class=" max-w-none w-32 h-auto" />
                <div class=" flex items-center absolute top-3 right-0 rounded-l-full pl-1 text-sm font-bold"
                    v-if="m.badges"
                    :style="{ backgroundColor: m.badges[0].bg_color, borderColor: m.badges[0].border_color, color: m.badges[0].text_color }">
                    {{ m.badges[0].text }}</div>
            </div>
            <div class=" flex-1 flex flex-col justify-between ml-3 overflow-hidden">
                <p class="overflow-hidden text-ellipsis whitespace-nowrap">
                    <span>番剧</span>
                    <span v-html="m.title"></span>
                </p>
                <p class="  overflow-hidden text-ellipsis whitespace-nowrap text-xs my-1"><span>{{ m.styles + ' · '
                }}</span><span>{{ setIsShow(m.pubtime) + ' · '
}}</span><span>{{ m.index_show }}</span></p>
                <p class=" overflow-hidden text-ellipsis whitespace-nowrap text-xs"><span>声优：</span><span>{{ m.cv
                }}</span></p>
                <p class=" text_ellipsis_3l text-xs font-bold text-gray-400"><span>简介:</span><span>{{ m.desc }}</span>
                </p>
                <p><span class=" text-xs mr-2">{{ timeAbbreviation(m.media_score.user_count) + '人评分' }}</span><span
                        style="color: #ffa058;" class=" text-xl">{{ m.media_score.score }}</span><i
                        class=" text-xs ">分</i></p>
                <div class=" flex">
                    <button class=" flex-shrink-0 mr-2 px-2 py-1 rounded-md text-sm text-white font-semibold"
                        style="background-color: #00AEEC;" @click="getBvid(m)">{{ m.button_text }}</button>
                    <div class=" flex">
                        <div class=" w-7 mr-1.5 px-1 rounded border text-center text-sm" v-for="item in m.eps"
                            :key="item.id"
                            v-show="(item.title === '1' || item.title === '2' || item.title === m.eps.length.toString() || item.title === (m.eps.length - 1).toString())"
                            @click="OtherEpisodes(item.id, item.title)">
                            {{ item.title === (m.eps.length - 1).toString() ? '...' : item.title }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <NofindView v-else></NofindView>
</template>

<style>
.svg-icon {
    fill: currentColor;
}

.text_ellipsis_3l {
    max-width: 100%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cover {
    /* display: none !important; */
    background: rgba(0, 0, 0, .5);
    z-index: 30;
}

#box:hover .cover {
    display: block !important;
}

i {
    list-style: none;
    font-style: normal;
}
</style>